<template>
     <div id="display">
        
         <div v-for="(item,index) in products" :item='item' :key='index'>
            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
            <router-link :to="{
                name:'list',
                params:{
                    id:item.id,
                    name:item.name,
                    price:item.price
                }
            }">
                <div class="ym">
                    <img :src="item.img" alt="">
                    <h4>{{item.name}}</h4><br>
                    <div class="a"><span class="count">{{item.num}}</span><span>折起</span></div>
                </div>
            </router-link>
         </div>
         <router-view></router-view>
     </div>

</template>
<script>

export default {
  name: 'firstPage',
  data(){
      return {
          products:[],
      }
  },
  mounted:function(){
      console.log(this)
  }

}

</script>

<style scoped>
#display {
    margin-top: 3px;
    height: 1000px;
    background-color: #f9f9fa;
    overflow: scroll;
}
#display::-webkit-scrollbar {
    display: none;
}
</style>